<template>
  <div class="dynamic">
    <template v-if="data && data.length">
      <div v-for="item in data" :key="item.id" class="dynamic-box">
        <div class="dy-icon">
          <i v-if="item.category === 'follow'" class="MC_iconfont MC_icon-bianji1-xian"></i>
          <i v-if="item.category === 'call'" class="MC_iconfont MC_icon-a-hujiaojieting"></i>
        </div>
        <div
          class="top"
          @click.stop="item.category === 'call' && showCallDetail(item.ref)"
          :style="item.category === 'call' && 'cursor: pointer'"
        >
          <span class="time">{{ item.createTime }}</span>
          <div class="title">
            <template
              v-if="
                item.category === 'call' &&
                ![
                  'IVR',
                  'QUEUE_ABANDON',
                  'AGENT_NO_ANSWER',
                  'CALL_LIMITE',
                  'BLACK_LIST',
                  'CUSTOMER_NO_ANSWER',
                  'RISK',
                  'VOICEMAIL'
                ].includes(item.content.status)
              "
            >
              <audio-operate
                :row="{
                  url: item.content.recordFileUrl,
                  isplay: false,
                  _id: item._id
                }"
              ></audio-operate>
            </template>
            {{ item.title }}
            <el-dropdown v-if="item.category === 'follow'">
              <i class="MC_iconfont MC_icon-gengduo-heng"></i>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="delFollowFun(item)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <div v-if="item.category === 'follow'" class="bottom">
          <p><span>操作人:</span> {{ item.agent }}</p>
          <p
            v-for="v in item.fields"
            :key="v._id"
            :class="[fieldId('attachments'), fieldId('serviceLabel')].includes(v._id) ? 'file-field' : 'dy-field'"
          >
            <el-tooltip :content="v.defaultName + ': ' + v.defaultValue" placement="top" effect="light">
              <span>{{ v.defaultName }}:</span>
            </el-tooltip>
            <template v-if="v._id === fieldId('attachments')">
              <!-- 附件 -->
              <template v-if="v.defaultValue && v.defaultValue.length">
                <span v-for="(val, idx) in v.defaultValue" :key="idx" class="file">
                  <a :href="val.url" :download="val.fileName" target="_blank">
                    {{ val.fileName }}
                  </a>
                  <i class="MC_iconfont MC_icon-yulan-yulan" @click="preview(v.defaultValue, val)"></i>
                </span>
              </template>
              <template v-else> -- </template>
            </template>
            <template v-else-if="v._id === fieldId('serviceLabel')">
              <!-- 服务标签 -->
              <template v-if="v.defaultValue && v.defaultValue.length">
                <el-tag
                  v-for="(item, index) in v.defaultValue"
                  :key="index"
                  :color="item.color"
                  :style="{
                    color: item.color === '#FFFFFF' || item.color === '#fff' || !item.color ? '#252c32' : '#ffffff'
                  }"
                >
                  {{ item.name }}
                </el-tag>
              </template>
              <template v-else> -- </template>
            </template>
            <template v-else>
              <el-tooltip :content="v.defaultName + ': ' + v.defaultValue" placement="top" effect="light">
                {{ v.defaultValue }}
              </el-tooltip>
            </template>
          </p>
        </div>
        <div v-else-if="item.category === 'call'" class="bottom">
          <p><span>类型：</span>{{ getCallTypeName[item.content.callType] }}</p>
          <p><span>状态：</span>{{ getCallStatusName[item.content.status] }}</p>
          <p><span>员工：</span>{{ item.content.agent }}</p>
          <p><span>服务组：</span>{{ item.content.queueName ? item.content.queueName : '--' }}</p>
          <p><span>外显号：</span>{{ item.content.displayNumber }}</p>
          <p><span>通话时长：</span>{{ item.content.bridgeDuration }}</p>
          <p>
            <span>服务标签：</span>
            <el-tag
              v-for="(v, i) in item.serviceLabels"
              :key="i"
              :color="v.color"
              :style="{ color: v.color === '#FFFFFF' || v.color === '#fff' || !v.color ? '#252c32' : '#ffffff' }"
            >
              {{ v.name }}
            </el-tag>
          </p>
          <p class="dy-field">
            <span>备注:</span>
            <el-tooltip :content="item.memo" placement="top" effect="light">
              {{ item.memo }}
            </el-tooltip>
          </p>
        </div>
      </div>
      <div v-if="moreShow" class="more" @click="loadMore">加载更多</div>
      <el-divider v-else border-style="dashed">已经到底啦~</el-divider>
    </template>
    <div v-else class="none">
      <img src="@common/assets/empty.svg" alt="" />
      <p>暂无客户动态</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { getCallTypeName, getCallStatusName } from '@app/customer/utils/common'
import audioOperate from '@/common/components/audio/audio-operate.vue'
import { delFollow } from '@app/customer/apis/pool'
import { ElMessage } from 'element-plus'
import { commonStore } from '@/common/store/modules/common'
import previewFile from '@/common/components/preview/index'
export default defineComponent({
  name: 'DynamicCard',
  components: { audioOperate },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    moreShow: {
      type: Boolean,
      default: false
    }
  },
  emits: ['onLoadMore', 'onUpdateDy', 'onCallDetailShow'],
  setup(_, { emit }) {
    const loadMore = () => {
      emit('onLoadMore')
    }

    const fieldId = (field: string) => {
      const obj = commonStore().publicCache.globalFieldCacheObj[field] || {}
      if (obj) {
        return obj._id
      }
      return ''
    }

    const delFollowFun = (row: any) => {
      delFollow({ _id: row._id }).then((res: any) => {
        if (res.success) {
          ElMessage.success('操作成功')
          emit('onUpdateDy')
        }
      })
    }

    const showCallDetail = (id: string) => {
      emit('onCallDetailShow', id)
    }

    const preview = (arr: any, row: any) => {
      previewFile({
        list: arr,
        img: row,
        isHiddenDelBtn: false
      })
    }

    return {
      loadMore,
      delFollowFun,
      getCallTypeName,
      getCallStatusName,
      fieldId,
      showCallDetail,
      preview
    }
  }
})
</script>

<style lang="stylus" scoped>
.dynamic
  height calc(100vh - 400px) !important
  overflow auto
  font-size 14px
  padding-top 20px
  .none
    text-align center
    color rgba(0, 0, 0, 0.6)
    margin-top 50px
  .more
    color var(--mc-main-color)
    cursor pointer
    font-size 12px
    margin-top 24px
    text-align center
  :deep(.el-divider__text)
    color rgba(0, 0, 0, 0.26)
    font-size 12px
  .dynamic-box
    border 1px solid var(--mc-gray4-color)
    border-radius: 4px
    margin-top 36px
    padding 0 24px 0 56px
    position relative
    &::before
        position absolute
        left 28px
        top -37px
        content ''
        width 1px
        height 26px
        background var(--mc-gray4-color)
    &:first-child
      margin-top 0px
      &::before
        content ''
        width 0
        height 0
    .dy-icon
      width 24px
      height 24px
      border-radius: 50%
      background var(--mc-main-color)
      color #fff
      text-align center
      line-height 24px
      position absolute
      left 16px
      top -12px
      i
        font-size 10px
    .top
      padding 16px 0 12px
      display flex
      justify-content space-between
      border-bottom 1px solid var(--mc-gray3-color)
      .time
        color rgba(0, 0, 0, 0.38)
        font-size 12px
      .title
        font-size 14px
        color var(--mc-main-color)
        .MC_icon-gengduo-heng
          cursor pointer
          color rgba(0, 0, 0, 0.38)
    .bottom
      padding 6px 0 16px 0
      p
        margin 10px 40px 0 0
        display inline-block
        &.dy-field, &.file-field
          width 100%
          display block
          color rgba(0, 0, 0, 0.38)
          font-size 12px
        &.dy-field
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
        .el-tag
          margin 0 6px 4px 4px
        span
          color rgba(0, 0, 0, 0.6)
        .file
          display inline-block
          background #F1F8FD
          padding 3px 4px
          margin 0 6px 4px 4px
          i
            font-size 14px
            cursor pointer
            margin-left 4px
            color var(--mc-main-color)
</style>
